<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>医生信息 - 萌迹(Cute Trail Admin)后台管理系统</title>
<link rel="icon" href="petvet.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-toolbar clearfix">
          <form class="pull-right search-bar" method="get" action="#!" role="form">
            <div class="input-group">
              <div class="input-group-btn">
                <input type="hidden" name="search_field" id="search-field" value="title">
                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                标题 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li> <a tabindex="-1" href="javascript:void(0)" data-field="doctor_name">医生姓名</a> </li>
                  <li> <a tabindex="-1" href="javascript:void(0)" data-field="department">所属部门</a> </li>
                </ul>
              </div>
              <input type="text" class="form-control" value="" name="keyword" placeholder="请输入...">
            </div>
          </form>
          <div class="toolbar-btn-action">
            <a class="btn btn-primary m-r-5" href="pet_doc_add.html"><i class="mdi mdi-plus"></i>新增</a>
        </div>
        <div class="card-body">
          
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>医生姓名</th>
                  <th>性别</th>
                  <th>电话</th>
                  <th>所属部门</th>
                  <th>职称</th>
                  <th>专长</th>
                  <th>入职时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>
                    <div class="btn-group">
                      <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                      <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <ul class="pagination" id="pagination">
            <li class="disabled"><span>«</span></li>
            <li class="active"><span>1</span></li>
            <li><a href="#1">2</a></li>
            <li><a href="#1">3</a></li>
            <li><a href="#1">4</a></li>
            <li><a href="#1">5</a></li>
            <li><a href="#1">6</a></li>
            <li><a href="#1">7</a></li>
            <li><a href="#1">8</a></li>
            <li class="disabled"><span>...</span></li>
            <li><a href="#!">14</a></li>
            <li><a href="#!">15</a></li>
            <li><a href="#!">»</a></li>
          </ul>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script src="js/pagination-comm.js"></script>

<script type="text/javascript">
$(function(){
  loadPageInfo("http://localhost:8080/pethospital/doctorInfo/queryByPage");
});
//显示行数据
function showTableInfo() {
  //清空之前的数据
  $("tbody").empty();
  //遍历当前页的数据
  for(let item of pageVO.content){
    //拼接表格行
    let row = `
  			<tr>
                  <td>${item.doctorName}</td>
                  <td>${item.gender}</td>
                  <td>${item.doctorPhone}</td>
                  <td>${item.department}</td>
                  <td>${item.title}</td>
                  <td>${item.specialty}</td>
                  <td>${item.hireDate}</td>
                  <td>
                    <div class="btn-group">
                      <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                      <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                    </div>
                  </td>
                </tr>
  		`;
    //添加到表格中
    $("tbody").append(row);
  }
}

</script>
</body>
</html>